<template>
  <div class="main">
    <van-pull-refresh
      loading-text="正在加载..."
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了..."
        @load="onLoad"
        class="alex-list"
      >
        <van-row
          v-for="item in list"
          :key="item.stcd"
          class="alex-row-padding"
          :class="item.dsfl == 1 ? 'alex-rowbac-on' : 'alex-rowbac-off'"
        >
          <van-row class="alex-font-center">
            <van-col span="12">{{ item.stnm }}</van-col>
            <van-col span="12" class="alex-shh">
              <van-icon :color="`rgb(39, 153, 184)`" name="clock-o" /> {{ item.tm }}
            </van-col>
          </van-row>
          <van-row class="alex-font-center">
            <van-col v-if="item.z > 0" span="12" class="alex-jj">
              最新水位: {{ item.z}} m
            </van-col>
            <van-col span="12" class="alex-jj"> 雨量: {{ item.pj >= 0?item.pj : '--' }} mm </van-col>
          </van-row>
          <van-row v-if="item.q > 0" class="alex-font-center">
            <van-col span="20" class="alex-jj">
              瞬时流量: {{ item.q }} m³
            </van-col>
          </van-row>
        </van-row>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast } from "vant";
import { formatTime } from "@/assets/utils/index.js";
import moment from "moment";
export default {
  data() {
    return {
      params: {
        currentPage: 1,
        pageSize: 10,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      alexshow: false,
      devitem: {},
      group: "成都市李家岩开发有限公司",
      weihu: "四川恒宣建设工程有限公司",
      isLoading: false,
      api_uri: "/shsqapi/ljyalex",
    };
  },
  methods: {
    onLoad() {
      let _this = this;
      if (this.finished) {
        return;
      }
      if (this.refreshing) {
        this.params.currentPage = 1;
        this.finished = false;
      }
      this.axios({
        method: "post",
        url: _this.api_uri + "/shsq/getShsqWaters",
        params: _this.params,
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data.code == 201) {
            _this.loading = false;
            Toast({
              message: "数据加载失败...",
              icon: "warning-o",
            });
          }
          if (res.data.code == 200) {
            _this.loading = false;
            let newlist = res.data.data;
            if (
              newlist.length == 0 ||
              newlist == null ||
              newlist.length < _this.params.pageSize
            ) {
              _this.finished = true;
            }
            if (_this.refreshing) {
              _this.refreshing = false;
              for (let i = 0; i < newlist.length; i++) {
                newlist[i].tm = formatTime(newlist[i].tm, "yyyy-MM-dd HH:mm");
              }
              _this.list = newlist;
            } else {
              for (let i = 0; i < newlist.length; i++) {
                newlist[i].tm = formatTime(newlist[i].tm, "yyyy-MM-dd HH:mm");
                _this.list.push(newlist[i]);
              }
            }
            _this.params.currentPage++;
          }
        })
        .catch((err) => {
          _this.loading = false;
          console.log("加载数据时发生未知错误...", err);
        });
    },
    onRefresh() {
      this.isLoading = true;
      this.finished = false;
      this.refreshing = true;
      this.params.currentPage = 1;
      this.list = [];
      setTimeout(() => {
        this.onLoad();
        Toast({
          message: "刷新成功...",
          //,icon: 'info-o'
        });
        this.isLoading = false;
      }, 1000);
    },
  },
  mounted() {},
};
</script>
<style scoped>
@import "../../assets/css/shsqdata.css";
</style>